<!--
 * @Author: Sam
 * @Date: 2020-10-26 11:11:25
 * @LastEditTime: 2020-11-25 09:30:22
 * @LastEditors: Sam
 * @Description: 
 * @FilePath: \thework\ygboost-eui\src\components\app\edit\setting\packproduct\TableComponent.vue
 * @可以输入预定的版权声明、个性签名、空行等
-->
<template>
  <el-table
    class="table-box margin-top"
    :border="true"
    :data="tableData"
    style="width: 100%"
    size="mini"
  >
    <el-table-column type="index" label="序号" />
    <el-table-column label="分区" prop="zonePlanId">
      <template slot-scope="scope">
        {{ zonePlansMap[scope.row[scope.column.property]] }}
      </template>
    </el-table-column>
    <!-- 遍历col -->
    <el-table-column
      v-for="column in tableColumns"
      :key="column.prop"
      :auto-fit="true"
      :fit-header="true"
      :prop="`${column.prop}`"
      :label="column.prop"
      :render-header="renderHeader"
    >
      <div slot-scope="scope" class="column-wrapper">
        <div
          class="column-content auto-fit-target"
          :title="scope.row[scope.column.property]"
        >
          {{ scope.row[scope.column.property] }}
        </div>
      </div>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {};
  },
  props: {
    tableColumns: {
      type: Array,
      // 表格头部信息
      default: function() {
        return [];
      }
    },
    tableData: {
      type: Array,
      // 表格数据
      default: function() {
        return [];
      }
    },
    channelFormulaMap: {
      type: Object,
      default: function(params) {
        return {};
      }
    },
    priceCategorysMap: {
      type: Object,
      default: function(params) {
        return {};
      }
    },
    zonePlansMap: {
      type: Object,
      default: function(params) {
        return {};
      }
    }
  },
  mounted() {},

  methods: {
    renderHeader(h, { column, $index }) {
      let info = column.label.split("_");
      let htmlHead = `${
        info[0] === "1" ? this.priceCategorysMap[info[1]] : "操作费"
      }`;
      let htmlFoot = `${info[2]}~${info[3]}`;

      // 这里在最外层插入一个div标签
      return h("div", [
        // h即为cerateElement的简写
        // 在div里面插入span
        h("div", {
          // 表示内容
          domProps: {
            innerHTML: htmlHead
          }
        }),
        h("div", {
          // 表示内容
          domProps: {
            innerHTML: htmlFoot
          }
        })
      ]);
    }
  }
};
</script>

<style></style>
